<script setup lang="ts">
import { watch, ref, computed } from "vue";
import { useDrawerManager } from "../drawer-manager/index";

const { drawerManager } = useDrawerManager();
const { drawerStack, stackTop, cachedKeys } = drawerManager;

const currentDrawer = computed(() => {
  if (!stackTop.value) {
    return false;
  }
  return stackTop.value.component;
});

const handleGoback = () => {
  drawerManager.popStack();
};

const handleJumpDrawer = (index: number) => {
  drawerManager.popStack(index + 1);
};
</script>
<template>
  <div class="drawer-container">
    <div class="drawer-header">
      <el-button @click="handleGoback">返回</el-button>
      <span v-for="(item, index) in drawerStack">
        <el-button type="text" @click="() => handleJumpDrawer(index)">{{
          item.drawerTitle
        }}</el-button>
        /
      </span>
    </div>
    <div class="drawer-content">
      <keep-alive :include="cachedKeys">
        <component
          v-if="currentDrawer"
          :is="currentDrawer"
          :key="currentDrawer"
        />
      </keep-alive>
    </div>
  </div>
</template>

<style lang="scss">
.drawer-container {
  background: #eee;
  border: 1px solid #ccc;
  width: 1000px;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
</style>
